<template>
  <div class="language-switcher">
    <button 
      :class="{ active: currentLanguage === 'zh' }"
      @click="setLanguage('zh')"
    >
      中文
    </button>
    <button 
      :class="{ active: currentLanguage === 'en' }"
      @click="setLanguage('en')"
    >
      English
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineEmits } from 'vue'

// 定义事件发射器
const emit = defineEmits<{
  (e: 'language-changed', language: string): void
}>()

// 响应式状态
const currentLanguage = ref('zh')

// 方法定义
const setLanguage = (language: string) => {
  currentLanguage.value = language
  emit('language-changed', language)
  // 保存语言选择到本地存储
  localStorage.setItem('selectedLanguage', language)
}

// 生命周期钩子
onMounted(() => {
  const savedLanguage = localStorage.getItem('selectedLanguage')
  if (savedLanguage) {
    currentLanguage.value = savedLanguage
  }
})
</script>

<style scoped>
.language-switcher {
  display: inline-block;
  margin-left: 20px;
}

.language-switcher button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.language-switcher button:hover {
  background: #f5f5f5;
}

.language-switcher button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
}
</style>